<template>
    <div class="decLoanDetail">
        <div class="table-breadcrumb">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>装修贷</el-breadcrumb-item>
                <el-breadcrumb-item :to="{ path: '/decLoanList' }">贷款列表</el-breadcrumb-item>
                <el-breadcrumb-item>贷款详情</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <!-- 信息 -->
        <div class="info">
            <h3>申请人基础信息</h3>
            <div class="infoText">
                <el-form>
                    <el-form-item label="姓名" label-width="80px">
                        <el-input v-model="userInfo.name" readonly></el-input>
                    </el-form-item>
                    <el-form-item label="身份证号" label-width="80px">
                        <el-input v-model="userInfo.id_no" readonly></el-input>
                    </el-form-item>
                    <el-form-item label="手机号" label-width="80px">
                        <el-input v-model="userInfo.phone"></el-input>
                    </el-form-item>
                    <el-form-item label="婚姻状况" label-width="80px">
                        <el-radio v-model="radio" label="0">未婚</el-radio>
                        <el-radio v-model="radio" label="1">已婚</el-radio>
                    </el-form-item>
                    <el-form-item label="学历" label-width="80px">
                        <el-input v-model="decLoanInfo.education" readonly></el-input>
                    </el-form-item>
                    <el-form-item label="月收入" label-width="80px">
                        <el-input v-model="decLoanInfo.month_income" readonly></el-input>
                    </el-form-item>
                    <el-form-item label="所在地区" label-width="80px">
                        <el-input v-model="allArea" readonly></el-input>
                    </el-form-item>
                    <el-form-item label="详细地址" label-width="80px">
                        <el-input v-model="userInfo.address" readonly></el-input>
                    </el-form-item>
                    <el-form-item label="身份证" label-width="80px">
                        <el-image 
                            style="width: 250px; height: 150px;margin-right:10px;"
                            :src="item" 
                            v-for="(item,index) in srcList"
                            :key="index"
                            :preview-src-list="srcList">
                        </el-image>
                    </el-form-item>
                    <el-form-item label="申请时间" label-width="80px">
                        <el-input :value="$moment(decLoanInfo.create_time*1000).format('yyyy-MM-DD HH:mm')" readonly></el-input>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <div class="info">
            <h3>贷款详情</h3>
            <div class="infoText">
                <el-form>
                    <el-form-item label="贷款金额" label-width="80px">
                        <el-input v-model="decLoanInfo.loan_amount" readonly></el-input>
                    </el-form-item>
                    <el-form-item label="还款期限" label-width="80px">
                        <el-input v-model="decLoanInfo.repay_term" readonly></el-input>月
                    </el-form-item>
                    <el-form-item label="关联订单" label-width="80px">
                        <el-input v-model="decLoanInfo.order_no" readonly></el-input>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <div class="info">
            <h3>紧急联系人</h3>
            <div class="infoText">
                <el-form v-if="decLoanInfo.urgent_contact && decLoanInfo.urgent_contact.length">
                    <el-form-item label="联系人" label-width="80px">
                        <el-input v-model="decLoanInfo.urgent_contact[0].name" readonly></el-input>
                    </el-form-item>
                    <el-form-item label="手机号码" label-width="80px">
                        <el-input v-model="decLoanInfo.urgent_contact[0].phone" readonly></el-input>
                    </el-form-item>
                    <el-form-item label="联系人关系" label-width="90px">
                        <el-input v-model="decLoanInfo.urgent_contact[0].relation" readonly></el-input>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return{
            decLoanInfo:{},
            radio:'0',
            allArea:'',
            srcList:[],
			userInfo:{},
        }
    },
    mounted() {
        this.getDetail()
    },
    methods: {
        // 获取贷款详情
        getDetail(){
            let id = this.$route.query.id;
            this.$http.post('/api/root/LoanApply/view',{id}).then(res=>{
                console.log(res,'贷款详情');
                if(res.code==1){
                    this.decLoanInfo = res.data?res.data:{};
                    this.radio = res.data.is_marry==0?'0':'1';
                    this.srcList = [res.data.id_no_front.path,res.data.id_no_back.path]
                    this.allArea = res.data.province + res.data.city + res.data.district
					this.userInfo=res.data.user;
                }
            })
        }
    },
}
</script>
<style lang="less">
@import 'detail.less';
</style>

